<template>
  <div class="hospital-detail">
    <!-- 头部 -->
    <div class="header">
      <el-button type="primary" icon="ArrowLeft" @click="handleBack"
        >返回</el-button
      >
      <h2 class="title">医院详情</h2>
    </div>

    <!-- 基本信息 -->
    <el-card class="base-info">
      <template #header>
        <span class="card-title">基本信息</span>
      </template>

      <el-row :gutter="40">
        <el-col :span="8">
          <el-image
            :src="hospitalInfo.hospitalPicture"
            :preview-src-list="[hospitalInfo.hospitalPicture]"
            fit="cover"
            class="hospital-image"
          />
        </el-col>

        <el-col :span="16">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="医院ID">{{
              hospitalInfo.hospitalId
            }}</el-descriptions-item>
            <el-descriptions-item label="医院名称">{{
              hospitalInfo.hospitalName
            }}</el-descriptions-item>
            <el-descriptions-item label="是否推荐">
              <el-tag
                :type="hospitalInfo.isRecommended === 1 ? 'success' : 'info'"
              >
                {{ hospitalInfo.isRecommended === 1 ? '是' : '否' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="医生人数">{{
              hospitalInfo.doctorCount
            }}</el-descriptions-item>
            <el-descriptions-item label="科室数">{{
              hospitalInfo.departmentquantity
            }}</el-descriptions-item>
            <el-descriptions-item label="所在地区">{{
              formatLocation(hospitalInfo.location)
            }}</el-descriptions-item>
            <el-descriptions-item label="详细地址">{{
              hospitalInfo.detailedAddress
            }}</el-descriptions-item>
            <el-descriptions-item label="医院电话">{{
              hospitalInfo.hospitalPhone
            }}</el-descriptions-item>
            <el-descriptions-item label="创建人">{{
              hospitalInfo.createName
            }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{
              formatDate(hospitalInfo.createTime)
            }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </el-card>

    <!-- 科室列表 -->
    <el-card class="department-list">
      <template #header>
        <span class="card-title">科室</span>
      </template>

      <el-row :gutter="20">
        <el-col
          v-for="(departments, category) in departmentData"
          :key="category"
          :span="6"
          class="department-category"
        >
          <div class="category-title">{{ category }}</div>
          <div class="tags-container">
            <el-tag
              v-for="(dep, index) in departments"
              :key="index"
              type="info"
              class="department-tag"
            >
              {{ dep }}
            </el-tag>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 医院简介 -->
    <el-card class="introduction">
      <template #header>
        <span class="card-title">简介</span>
      </template>
      <div class="content">{{ hospitalInfo.hospitalIntroduction }}</div>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, onMounted, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import axios from 'axios';
import { provinceAndCityData } from 'element-china-area-data';

const router = useRouter();
const route = useRoute();

// 医院数据
const hospitalInfo = reactive({
  hospitalId: '',
  hospitalName: '',
  hospitalPicture: '',
  isRecommended: 0,
  doctorCount: 0,
  departmentquantity: 0,
  location: '',
  detailedAddress: '',
  hospitalPhone: '',
  hospitalIntroduction: '',
  createName: '',
  createTime: '',
  hospitalDepartments: ''
});

// 科室数据
const departmentData = computed(() => {
  if (!hospitalInfo.hospitalDepartments) return {};

  const departments = hospitalInfo.hospitalDepartments.split(',');
  const internalDepts = ['心内科', '消化内科', '内分泌科'];
  const surgeryDepts = ['神经外科', '胸外科', '泌尿外科'];

  return {
    内科: departments.filter((dept) => internalDepts.includes(dept)),
    外科: departments.filter((dept) => surgeryDepts.includes(dept))
  };
});

// 获取医院详情
const fetchHospitalDetail = async () => {
  try {
    const res = await axios.get(
      'http://localhost:5223/api/Hospitail/HospitalQuery',
      {
        params: { HospitalId: route.query.hospitalId }
      }
    );

    if (res.data.code === 210 && res.data.data.list?.[0]) {
      Object.assign(hospitalInfo, res.data.data.list[0]);
    } else {
      ElMessage.error('获取医院详情失败');
    }
  } catch (error) {
    console.error('获取医院详情失败:', error);
    ElMessage.error('获取医院详情失败');
  }
};

// 格式化地区显示
const formatLocation = (location) => {
  if (!location) return '';
  const [province, city] = location.split('-');
  const provinceData = provinceAndCityData.find((p) => p.value === province);
  if (!provinceData) return location;

  const cityData = provinceData.children?.find((c) => c.value === city);
  return cityData ? `${provinceData.label} ${cityData.label}` : location;
};

// 格式化日期
const formatDate = (date) => {
  if (!date) return '';
  return new Date(date).toLocaleString();
};

// 返回处理
const handleBack = () => {
  router.go(-1);
};

// 初始化
onMounted(() => {
  if (route.query.hospitalId) {
    fetchHospitalDetail();
  } else {
    ElMessage.error('缺少医院ID参数');
    router.back();
  }
});
</script>

<style scoped>
.hospital-detail {
  padding: 20px;
  background: #f5f7fa;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.title {
  margin-left: 20px;
  color: #303133;
}

/* 卡片统一样式 */
.el-card {
  margin-bottom: 20px;
}

:deep(.el-card__header) {
  background: #f5f7fa;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.hospital-image {
  width: 100%;
  height: 300px;
  border-radius: 4px;
}

.department-list {
  .department-category {
    margin-bottom: 15px;

    .category-title {
      font-weight: bold;
      margin-bottom: 10px;
      color: #409eff;
    }

    .tags-container {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .department-tag {
      margin: 2px;
    }
  }
}

.introduction {
  .content {
    line-height: 1.8;
    color: #606266;
    white-space: pre-wrap;
  }
}
</style>
